<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <div>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="toggleTodo(todo.id)"
        />
        <!-- 
            <input
                type="checkbox"
                // 通过v-model指令实现双向绑定 但违反了单向数据流的原则，不建议使用
                v-model="todo.done"
            /> 
        -->
        {{ todo.name }}
      </div>
      <button @click="deleteTodo(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: "TodoList",
  props: {
    todos: {
      type: Array,
      required: true,
    },
    deleteTodo: {
      type: Function,
      required: true,
    },
    toggleTodo: {
      type: Function,
      required: true,
    },
  },
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  width: 100%;
}

li {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  background-color: rgb(233, 69, 69);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}
</style>
